<!-- 选址转让页面 -->
<template>
	<div>
		<Head />
		<view class="site-item">
			<HMfilterDropdown :menuTop="70" :filterData="filterData" :defaultSelected="defaultSelected" :confirm="confirm"
			 :updateMenuName="true" dataFormat="Object"></HMfilterDropdown>
		</view>
		<hr />
		<view class="site-content">
			<!-- 点击事件跳转到商铺详情 -->
			<view class="site-content-first" v-for="(ele,index) in sitelist" :key='index' @click="todetail(ele)">
				<!-- {{ele}} -->
				<view class="site-content-first-img">
					<image :src="ele.cover" mode=""></image>
				</view>
				<view class="site-content-first-top">{{ele.title}}</view>
				<view class="site-content-first-mid">一层/25㎡/社区住宅底商</view>
				<view class="site-content-first-bottom">{{ele.nlikes}}元/月</view>
			</view>
		</view>
	</div>
</template>
<script>
	import Head from '../Home/head.vue';
	import HMfilterDropdown from '../../components/HM-filterDropdown/HM-filterDropdown.vue';
	import data from '../../common/data.js'; //筛选菜单数据
	export default {
		components: {
			Head,
			'HMfilterDropdown': HMfilterDropdown
		},
		data() {
			return {
				indexArr: '',
				valueArr: '',
				defaultSelected: [],
				filterData: [],
				sitelist: []

			}
		},
		onLoad: function() {
			//定时器模拟ajax异步请求数据
			setTimeout(() => {
				console.log(data)
				this.filterData = data;
			}, 100);
			// 模拟ajax请求子菜单数据。
			setTimeout(() => {
				this.filterData[0].submenu[0].submenu = [{
					"name": "不限",
					"value": "不限"
				}, {
					"name": "朝阳区",
					"value": "朝阳区"
				}, {
					"name": "东城区",
					"value": "东城区"
				}, {
					"name": "通州区",
					"value": "通州区"
				}, {
					"name": "西城区",
					"value": "西城区"
				}];
			}, 1000)
		},
		methods: {
			// 接收菜单结果
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;
			},
			//修改选中项
			changeSelected() {
				this.defaultSelected = [];
				this.$nextTick(() => {
					this.defaultSelected = [
						[1, 1, 0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
						[null, null], //第1个菜单选中 都不选中
						[1], //第2个菜单选中 一级菜单的第1项
						[
							[0],
							[1, 2, 7],
							[1, 0]
						], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
						[
							[0],
							[1],
							[1]
						] //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
					];
				})
			},
			// 跳转到详细信息
			todetail(e) {
				console.log(e)
				let detail = {
					cover: e.cover,
					id: e.id,
					title: e.title,
					nlikes:e.nlikes
				}
				uni.navigateTo({
					url: './details?detailDate=' + encodeURIComponent(JSON.stringify(detail))
				});
			},

		},
		async mounted() {
			let sitelist = await this.$api.json('sitelist');
			this.sitelist = sitelist.data
		}
	}
</script>

<style scoped lang="less">
	image {
		width: 144px;
		height: 113px;
	}

	.site-item {
		left: 0px;
		width: 375px;
		height: 44px;
		line-height: 20px;
		padding-top: 30px;
		// padding-bottom: 50px;
		box-sizing: content-box;
		text-align: center;
		border-top border-bottom: 1px solid #999999;
	}

	.site-content {
		left: 0px;
		width: 375px;
		height: 414px;
		line-height: 20px;
		text-align: center;

		.site-content-first {
			border-bottom: 1px solid #999999;
			position: relative;
			display: flex;
			width: 100%;
			height: 138px;

			.site-content-first-img {
				position: absolute;
				margin-left: 11px;
				margin-top: 13px;
				width: 144px;
				height: 113px;
				border-radius: 6px;
				background-color: #0044CC;
			}

			.site-content-first-top {
				position: absolute;
				margin-top: 22px;
				margin-left: 167px;
				width: 200px;
				height: 40px;
				line-height: 20px;
				color: rgba(16, 16, 16, 1);
				font-size: 14px;
				text-align: left;
				font-family: Arial;
				display: -webkit-box;

				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;

			}

			.site-content-first-mid {
				position: absolute;
				margin-top: 70px;
				margin-left: 167px;
				width: 129px;
				height: 23px;
				line-height: 17px;
				color: rgba(153, 153, 153, 1);
				font-size: 12px;
				text-align: center;
				font-family: Arial;
			}

			.site-content-first-bottom {
				position: absolute;
				margin-top: 90px;
				margin-left: 167px;
				width: 72px;
				height: 23px;
				line-height: 20px;
				color: rgba(255, 68, 68, 1);
				font-size: 14px;
				text-align: center;
				font-family: Arial;
			}
		}
	}
</style>
